<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link type="text/css" rel="stylesheet" href="/stylesheets/bootstrap.min.css" />
  <title>用户列表</title>

  <!--引入Jq插件-->
  <script type="text/javascript" src="/javascripts/jquery-1.8.3.min.js"></script>

  <!--引入分页插件-->
  <script type="text/javascript" src="/javascripts/jqPaginator.js"></script>

  <!--引入base.js用于改变状态-->
  <script type="text/javascript" src="/javascripts/base.js"></script>
</head>

<body>
  <div class="panel panel-primary" style="margin: 10px 10px;">
    <div class="panel-heading">
      <h3 class="panel-title">
        农户列表
      </h3>
    </div>
    <div class="panel-body">
      <div class="clearfix" style="margin-bottom: 10px;">
      </div>
      <div class="row">
        <form>
          <div class="col-md-offset-1 col-md-2 margin-bottom-15">
            <label for="account" class="control-label">注册手机号</label>
            <input type="text" class="form-control" id="account" value="<%=account%>" name="account">
          </div>
          <div class="col-md-2 margin-bottom-15">
            <label for="user_name" class="control-label">姓名</label>
            <input type="text" class="form-control" id="user_name" value="<%=userName%>" name="userName">
          </div>
          <div class="row templatemo-form-buttons">
            <div class="col-md-2">
              <button type="submit" class="btn btn-primary" style="margin-top: 24px;margin-left: 20px;">查询</button>
              <button type="reset" class="btn btn-default" style="margin-top: 24px;margin-left: 15px;">重置</button>
            </div>
          </div>

        </form>
      </div>
      <div class="clearfix" style="margin-bottom: 20px;"></div>
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="table-responsive">
            <table class="table table-striped table-hover table-bordered">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>注册手机号</th>
                  <th>地址</th>
                  <th>注册时间</th>
                  <th>账号状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <% for(var i=0;i<body.length;i++){%>
                  <tr>
                    <td>
                      <%=body[i].name %>
                    </td>
                    <td>
                      <%=body[i].account %>
                    </td>
                    <td>
                      <%=body[i].address %>
                    </td>
                    <td>
                      <%=body[i].createTime %>
                    </td>
                    <td><%if(data[i].membershipStatus==0){%>
                      已吊销
                      <%}else if(data[i].membershipStatus==2){%>
                      正常
                      <%}%>
                  </td>
                    <td>
                      <a href="/users/edit?account=<%=body[i].account%>" class="btn btn-info">查看</a>
                      <a href="/users/edit?account=<%=body[i].account%>" class="btn btn-info">吊销</a>
                    </td>
                  </tr>
                  <%}%>
              </tbody>
            </table>
            <div id="page" class="pagination pull-right"></div>
          </div>

        </div>
      </div>
    </div>
  </div>

</body>

<script>
  $('#page').jqPaginator({
    totalPages: <%=totalPages%>,   //设置分页的总页数
    visiblePages: 8,  //设置当前可视页码数（例如有100页，当前第1页，则显示1 - 7页）
    currentPage: <%=page %>,    //设置当前的页码
    onPageChange: function (num, type) {    //回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数： 1、“目标页"的页码，Number类型  2、触发类型，可能的值：“init”（初始化），“change”（点击分页）
      console.log('当前第' + num + '页', type);

      if (type == 'change') {
        location.href = "/users/userList?page=" + num + "&account=<%=account%>" + "&userName=<%=userName%>";
      }

    }
      });
</script>

<style>
  .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=88);
  }

  .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 55%;
    height: 55%;
    padding: 20px;
    border: 10px solid rgb(120, 196, 231);
    border-radius: 20px;
    background-color: white;
    z-index: 1002;
    overflow: auto;
  }
</style>

</html>